/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Table, TableBody, TableRow, Text, TableHead,} from "customize-easy-ui-component";
import {DirectLink} from "../../../routing/Link";
import {item宏观检验o, 元件检查项目, 附页其它项目} from "./editorMeta";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

//内部检验报告（附页）
export const 内部检验报告附页= ({theme, orc, rep} :{theme: any, orc:any, rep:any}
) => {
  //拆解两个区域的, 数组序号pfrom 从0为起点； 不包含pto；
  function partRender(pfrom:number,pto:number)
  {
    return <>
      { item宏观检验o.map(([name,conf,]: any, i:number) => {
        if(i<pfrom || i>=pto) return null;
        const {t: title,}=conf;
        return <TableRow key={i}>
          { (0===i || 10===i) && <CCell rowSpan={10}  split>主要受压元部件检查</CCell> }
          <CCell>{title?? orc?.[name]?.t??'－'}</CCell>
          { 元件检查项目.map(([ititle,subf], m:number) => {
            return <CCell key={2+m}>{orc?.[name]?.[subf]??'－'}</CCell>
          })}
        </TableRow>
      }) }
    </>;
  }
  //for(let one of 附页其它项目){} useMemo 却需正规react的组件; 【约束】固定的4X5个项目布局的。
  const renderOtherItem=<>
    {(new Array(5).fill(null)).map((_,l:number) => {
      return <TableRow key={l}>
        { 0===l && <CCell split rowSpan={5}>其他检验项目</CCell>
        }
        { (new Array(4).fill(null)).map((_,f:number) => {
            const [name, desc]=附页其它项目[4*l + f];     //其他检验项目-可增加项目名称（第19 20项）对应=第五行的最后2列排的项目。
            const descN= (4===l&&2===f)? orc?.多出1n : (4===l&&3===f)? orc?.多出2n : desc;
            return <React.Fragment key={f}>
              <CCell>{descN??'－'}</CCell><CCell>{orc?.[name]??'－'}</CCell>
            </React.Fragment>;
        })}
      </TableRow>
    })}
  </>

  return <>
    <div css={{
      display: 'flex',
      justifyContent: 'space-between'
    }}>
      <Text>单位内部编号：{orc?.单位内部编号}</Text>
      <Text>报告编号：{rep.isp.no}</Text>
    </div>
    <Table fixed={["5.5%", "%", "8.5%", "8.5%", "8.5%", "8.5%", "8.5%", "8.5%", "8.5%", "8.5%"]} css={{borderCollapse: 'collapse'}} tight  miniw={800}>
      <TableHead>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ALL`}>
          <TableRow>
            <CCell></CCell><CCell>\</CCell>
            { 元件检查项目.map(([ititle,subf], m:number) => {
              return <CCell key={m}>{ititle}</CCell>
            })}
          </TableRow>
        </DirectLink>
      </TableHead>
      <TableBody>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/MetacomponM#MetacomponM`}>
          {partRender(0,10)}
        </DirectLink>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/MetacomponO#MetacomponO`}>
          {partRender(10,20)}
        </DirectLink>
      </TableBody>
    </Table>
    <Table fixed={ ["5.5%","12%","14.5%","10.5%","12%","11.5%","12%","11%","%"] } css={{borderCollapse: 'collapse'}} tight  miniw={800}>
      <TableBody>
        <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/OtherTestItems#OtherTestItems`}>
          {renderOtherItem}
        </DirectLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck orc={orc} rep={rep} cap={'检验'} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
    </TailMenRowIspCheck>
    <Text css={{fontSize:'0.8rem'}}>注：上述检查项目表中，符合要求打“√”，基本符合要求打“○”，不符合要求打“×”，无此项划去“—”；</Text>
  </>;
};

